<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>HTML Video Player (+UI +Responsive)</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet' href='https://codepen.io/simeydotme/pen/gOqEOw/d9898b2e99195a68dfb72cd24829e547.css'>
<link rel="stylesheet" href="./style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
</head>
<body>
<!-- partial:index.partial.html -->
<div class="demo-container">
    
    <p class="redacted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pretium lorem nec tortor elementum, et aliquam erat feugiat. Duis interdum enim vitae justo cursus pulvinar eu ac nulla. Donec consectetur vehicula turpis. Nunc laoreet tincidunt elit ultrices elementum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur augue magna, posuere id tortor vel, condimentum consectetur lacus. Pellentesque dui est, ornare vitae semper et, dapibus ut lacus. Etiam sed porta dui. Phasellus non nisl eget dolor commodo imperdiet.</p>
    
  <article class="video"> 
    <video volume="0.2">
      
      <!-- MP4 must be first for iPad! 
      removed this as it was causing me guff!

      interestingly, add it back in to see the error

      <source src="http://files.simey.me/html5-vids/trailer.mp4" type="video/mp4">-->
        <!-- Safari / iOS, IE9 -->
        <source src="https://assets.codepen.io/13471/trailer.webm" type="video/webm">
          <!-- Chrome10+, Ffx4+, Opera10.6+ -->
<!--           <source src="https://files.simey.me/html5-vids/trailer.ogv" type="video/ogg"> -->
            <!-- Firefox3.6+ / Opera 10.5+ -->
            
            <div class="loading">
              I have a bad feeling about this... <br>
              ... your browser doesn't support the video format!
            </div>
          </video>    
        </article>
    
    <p class="redacted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pretium lorem nec tortor elementum, et aliquam erat feugiat. Duis interdum enim vitae justo cursus pulvinar eu ac nulla. Donec consectetur vehicula turpis. Nunc laoreet tincidunt elit ultrices elementum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur augue magna, posuere id tortor vel, condimentum consectetur lacus. Pellentesque dui est, ornare vitae semper et, dapibus ut lacus. Etiam sed porta dui. Phasellus non nisl eget dolor commodo imperdiet.</p>
    
</div>
        
        <div class="intro">
  
  <h2>A video player ui written in CSS</h2>
  <p>Also spent a bit of time writing a jquery plugin to make the UI function, too.</p>
  <p>I especially like the subtle animation when you hit the "replay" button as the movie ends.</p>
  <ul>
    <li>It's responsive,</li>
    <li>has left/right keyboard support when you've activated the seeker,</li>
    <li>shift key increases skip time</li>
    <li>dragging/clicking support for seeking,</li>
    <li>a custom loader animation</li>
    <li>pretty sure it works in >= ie9</li>
          </ul>
  
</div>
<!-- partial -->
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script  src="./script.js"></script>

</body>
</html>
